<template>
  <div>
    <nav class="topNav dip">
        <span class="topNav_link"  @click="IFURL(''+URL+'')">
          <img :src="'../../../static/images/Order/'+this.topnavReturn.img+''" alt="" class="topNaval_img">
        </span>
        <span>
          <!-- <router-link class="topNav_logo" v-if="this.topnavText.TerxIs" :to="this.topnavText.ToUrl">
            <img :src="'./static/images/index/'+this.topnavText.img+''" class="topNaval_img"> 
          </router-link> -->

          <!--  ---------text文本------------    -->
            <i class="topNaval_Text">{{text}}</i>        
        </span>
        <!-- <router-link class="topNav_savser" :to="this.topnavSavser.ToUrl">
          <img :src="'../../../static/images/index/'+this.topnavSavser.img+''" alt="" class="topNaval_img">        
        </router-link> -->
        <span class="topNav_savser" @click="Customer()">
          <img :src="'./static/images/index/'+this.topnavSavser.img+''" alt="" class="topNaval_img">        
        </span>
      </nav>
      <transition :name="transitionNameComponents">  
        <CurAdd v-show="this.Curnone" @showCustome="changeCustome()"></CurAdd>
      </transition>
  </div>
</template>
<script>
import CurAdd from '../indexConent/Customer'
export default {
  props:['URL','text'],//这是指定路由 由父元素传进来的（谁调用他就可传 名字规定：URL）  
  data(){
    return{
      Curnone:false,
      transitionNameComponents:'slide-block',
      topnavReturn:{
        ToUrl:'/bomNav/mall',
        img:'returnnext.png'
      },
      topnavText:{
        ToUrl:'/',
        // TerxIs:true,
        // img:'logo.png',
        Text:'方案A'
      },
      topnavSavser:{
        ToUrl:'/',
        img:'service.png'
      },
    }
  },
  methods:{
    Customer(){
      // this.Curnone = false == this.Curnone;
      // let section = document.getElementById('section_box');
      // section.style.display = 'block';
      this.Curnone = true;
    },
    IFURL(URL){
      if(URL != ''){
        this.$router.replace({
          // replace
          path:URL, //把传的路由给字元素
        })    
      }else {
       this.$router.back()
        // var f =  this.$router.back() == 0?
        // this.$router.push({
        //   path:URL, //把传的路由给字元素
        // }) 

        // if(window.history.back() == 0){
        //   console.log(2222)
        // }else{
        //   this.$router.back(-1)  
        // }
        // this.$router.go(0) 
      }
    },
    changeCustome(){
      this.Curnone = false
    },
  },
  components:{CurAdd},
  cerated(){
      
  }
 
}
</script>
<style lang="scss" scoped>
.topNav{
  width: 100%;
  height: .8rem;
  position: fixed;
  top:0rem;
  z-index: 51;
  background: #fff;
    -webkit-justify-content: space-between;
      -ms-flex-pack: distribute;
          justify-content: space-between;
    -webkit-box-align:center;
  -webkit-align-items:center;
     -moz-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  border-bottom: .01rem #DEDEDE solid;
  padding:0rem .4rem;
  .topNaval_img{
    width: 100%;
    height: 100%;
  }
  .topNaval_Text{
    text-decoration:none;
    align-content: center;
    height: 100%;
    line-height: .54rem;
    font-size: .34rem;
    font-family: "MicrosoftYaHei";
    color:#333;
  }
  .topNav_link{
    display: block;
    width: .42rem;
    height: .42rem;
  }
  .topNav_logo{
    height: 0.5rem;
    width: 0.54rem;
  }
  .topNav_savser{
    height: 0.42rem;
    width: 0.48rem;
  }
}
.slide-block-enter{
   opacity: 0;
   -webkit-transition: all .8s;
  -o-transition: all .8s;
  -moz-transition: all .8s;
  transition: all .8s;
}
.slide-block-leave-active{  
  opacity: 0;  
  -webkit-transition: all .8s;
  -o-transition: all .8s;
  -moz-transition: all .8s;
  transition: all .8s;
    
} 
</style>
